<template>
    <div :id="'mean-daily-close-echart' + stock" :style="{ width: '1000px', height: '600px' }"></div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import * as echarts from 'echarts'
import { builtData } from "../myechart/candlestickEchart";
import { getDailyDetailData } from "../service/daily";
import { openNewTableDDisplay } from "../router";


const props = defineProps({
    stock: String
})

const state = reactive({
    opShow : true,
})

let myChart = null
const initEchart = () => {
    myChart = echarts.init(document.getElementById('mean-daily-close-echart' + props.stock))
    myChart.resize();

    // 添加点击事件
    myChart.on('dblclick', function(params) {
        openNewTableDDisplay(props.stock, params.name)
    });
}

const loadEchart = () => {
    getDailyDetailData(props.stock).then(res => {
        let option = builtData(props.stock, res.data.slice(-1000))
        myChart.setOption(option)
    })
}

onMounted(()=> {
    initEchart()
    loadEchart()
})
</script>